<template>
  <div class='app-container'>
    <div class='unit-ment' :view-id="curtype">
      <div class="unit-tabs">
        <div class="tabs1" :class="{'unit-tabs-act':tab == '1'}" v-on:click="clickone('1')">
          按保单号登记
        </div>
        <div class="tabs2" :class="{'unit-tabs-act':tab == '2'}" v-on:click="clickone('2')">
          Excel表格导入
        </div>
        <div class="tabs2" :class="{'unit-tabs-act':tab == '3'}" v-on:click="clickone('3')">
          查看导入任务
        </div>
      </div>
      <div>
        <div v-show="tab == '1'">
          <div class='layout1 clearfix'>
            <div class='form'>
              <el-form label-width="100px" :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item label="保险公司：" prop='insurance' class='inputtitle'>
                  <el-select v-model="ruleForm.insurance" placeholder="请选择保险公司" class='inputbox' @change='getinsurancestaffs' size='mini'>
                    <el-option v-for="item in options" :key="item.id" :label="item.insuranceName
    " :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="工号：" prop='gonghao' class='inputtitle'>
                  <el-select v-model="ruleForm.gonghao" placeholder="请选择工号" size='mini' class='inputbox'>
                    <el-option v-for="item in items1" :key="item.id" :label="item.staffAccount" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="业务员：" prop='yewuyuan' class='inputtitle'>
                  <el-select v-model="ruleForm.yewuyuan" class='inputbox' placeholder="请选择业务员" size='mini'>
                    <el-option v-for="item in users" :key="item.id" :label="item.userName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="保单号：" prop='baodanhao' class='inputtitle'>
                  <el-input type="textarea" class='baodanlist' rows='10' v-model='ruleForm.baodanhao'></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class='notice'>
              <div class='nstaff'>
                <span class='circle1'>注意事项</span>
              </div>
              <div class='notice1'>
                <span class='circle'></span>工号一定要选择正确，否则无法导入；</div>
              <div class='notice1'>
                <span class='circle'></span>请确保每行一个保单号；</div>
              <div class='notice1'>
                <span class='circle'></span>保单号输入栏中不能出现空行，否则空行以下保单号无法导入；</div>
            </div>
          </div>
          <div class='bottom'>
            <button type='button' v-on:click="submitForm('ruleForm')" class='btn1 el-button el-button--primary el-button--small'>确定</button>
            <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
              <div class='bdload'>
                <span>保单登记失败！{{errormsg}}</span>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
        <div v-show="tab == '2'">
          <div class='layout clearfix'>
            <div class='biaoge clearfix'>
              <div class='file'>
                <span class='daoru'>导入文件：</span>
              </div>
              <div class='model'>
                <el-upload class="upload-demo lead" action="upurl" :auto-upload='true' :on-success="loadSuc" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :before-upload="beforeAvatarUpload" accept="excel/xls,excel/xlsx">
                  <div slot="tip" class="el-upload__tip">只能上传.xlsx/.xls文件</div>
                  <el-button size="small" :on-error='error'>
                    <i class='el-icon-upload'></i> 点击上传</el-button>
                </el-upload>
                <!-- <span class='model2'>还没有模板，马上<a href="../../assests/file/GuaranteeSlipImportTemplate.xlsx" download='w3logo'>下载模板</a></span> -->
              </div>
            </div>
            <div class='notice2'>
              <div>
                <span class='circle1'>注意事项</span>
              </div>
              <div class='notice3'>
                <span class='circle'></span>如果还没有模板，请
                <a href="">下载模板</a>
              </div>
              <div class='notice3'>
                <span class='circle'></span>请确保表格中的工号与保单号一一对应正确，否则无法导入；</div>
              <div class='notice3'>
                <span class='circle'></span>请确保表格中没有空行，否则空行一下保单号无法导入；</div>
              <div class='notice3'>
                <span class='circle'></span>支持扩展名xlsx、xls</div>
            </div>
          </div>
          <div class='btn2'>
            <button type='button' v-on:click="loading()" class='el-button el-button--primary el-button--small'>确定</button>
          </div>

        </div>
        <div v-show="tab == '3'">
          <div class='uti-table'>
            <el-table :data="list" style="width: 100%">
              <el-table-column prop="creationTime" label='提交时间'></el-table-column>
              <el-table-column prop="creatorUser" label="提交人">
                <template slot-scope='scope'>
                  <span>{{scope.row.name}}</span>
                  <span>({{scope.row.userName}})</span>
                </template>
              </el-table-column>
              <el-table-column prop="creatorUser" label="进度" width='120'>
                <template slot-scope='scope'>
                  <span>{{scope.row.succedCount + scope.row.failedCount}}/{{scope.row.totalCount}}</span>
                  <span></span>
                </template>
              </el-table-column>
              <el-table-column label="成功" width='100'>
                <template slot-scope="scope">
                  <span type="text" size="small">{{scope.row.succedCount==0?'-':scope.row.succedCount}}</span>
                </template>
              </el-table-column>
              <el-table-column label="失败" width='100'>
                <template slot-scope="scope">
                  <span type="text" size="small">{{scope.row.failedCount==0?'-':scope.row.failedCount}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width='130' align='right'>
                <template slot-scope="scope">
                  <a type="text" size="small" class='detail' v-on:click='lookdetail(scope.row.id)'>查看详情</a>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class='paging'>
            <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dd: "",
      data: {},
      centerDialogVisible: null,
      tab: "1",
      list: null,
      pagetotal: null,
      currentPage: 1,
      value: "",
      options: [],
      items1: [],
      value1: "",
      users: [],
      errormsg: "",
      value2: "",
      ruleForm: {},
      excelFileName: [],
      load: "",
      action: "",
      rules: {
        insurance: [
          { required: true, message: "请选择保险公司", trigger: "change" }
        ],
        gonghao: [{ required: true, message: "请选择工号", trigger: "change" }],
        yewuyuan: [
          { required: true, message: "请选择业务员", trigger: "change" }
        ],
        baodanhao: [
          { required: true, message: "请选择保单号", trigger: "blur" }
        ]
      },
      upurl:process.env.BASE_DOWN+'/api/services/UploadFile?templateCode=0'
    };
  },
  mounted() {
    if (this.$route.params.number) {
      this.tab = this.$route.params.number;
    }
    // if(this.$route.params.tab){
    //   this.tab = this.$route.params.tab;
    // }else{
    //   this.tab = '1';
    // }
  },
  computed: {
    curtype() {
      let id = this.$route.params.id;

      if (id) {
        if (id == "excel") {
         this.tab = '2'
        } else if (id == "tasks") {
         this.tab = '3'
        }
      }else{
         this.tab = '1'
      }
    }
  },
  created() {
    this.fillDate(), this.getinsurance();
    this.getinsurancestaffs();
    this.getusers();
    //  let type = this.$route.query.type;
    //  if(!type){
    //    alert("333")
    //   this.clickone('1')
    //  }
  },
  methods: {
    getinsurance() {
      let params = {};
      // let all = { id: "", insuranceName: "全部保险公司" };
      this.post(params, "services/app/common/GetInsurances").then(rs => {
        console.log(rs);
        let result = rs.result.items;
        // result.unshift(all);
        this.options = result;
      });
    },
    getinsurancestaffs(val) {
      let params = {
        id: val
      };
      this.post(params, "services/app/common/GetCurrentStaffs").then(rs => {
        console.log(rs);
        let result = rs.result.items;
        this.items1 = result;
      });
    },
    getusers() {
      let params = {};
      this.post(params, "services/app/common/GetUsers").then(rs => {
        console.log(rs);
        let result = rs.result.users;
        this.users = result;
      });
    },
    leadin() {
      let bdh = this.ruleForm.baodanhao;
      let dd = bdh.replace(/\r\n/g, ";").replace(/\n/g, ";");
      let arr = dd.split(";");
      let len = arr.length;
      let params = {
        staffId: this.ruleForm.gonghao,
        userId: this.ruleForm.yewuyuan,
        guaranteeContent: arr
      };
      this.post(params, "services/app/guaranteeSlip/ImportGuarantee").then(
        rs => {
          console.log(rs);
          var id = rs.result.batchId;
          if (rs.success) {
            this.$router.push({ name: "load", params: { id: id, len: len } });
          } else {
            this.errormsg = rs.result.errorMessage;
            this.centerDialogVisible = true;
          }
        }
      );
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          // alert('submit!');
          // this.leadin();
          this.leadin();
        } else {
          return false;
        }
      });
    },
    submit(leadForm) {
      this.lead();
    },
    toload() {
      this.$router.push({
        name: "load",
        id: "0"
      });
    },
    tijiao() {
      //走接口
    },
    clickone(type) {
     
      //this.tab = types;
      if (type == "1") {
        this.$router.push({ name: "insentry1"});
      } else if (type == "2") {
        this.$router.push({ name: "insentry2", params: { id: "excel" } });
      } else if (type == "3") {
        this.$router.push({ name: "insentry3", params: { id: "tasks" } });
      }
     // this.$router.push({ name: "insentry1", query: { type: types } });
    },
    fillDate(pageindex) {
      let params = {
        pageIndex: pageindex
      };
      this.post(
        params,
        "services/app/guaranteeSlip/GuaranteeSlipBatchList "
      ).then(rs => {
        if (rs.success) {
          console.log(rs.success);
          this.list = rs.result.items;
          this.pagetotal = rs.result.totalCount;
          if (pageindex) {
            this.currentPage = pageindex;
          } else {
            this.currentPage = 1;
          }
        }
      });
    },
    lookdetail(val) {
      this.$router.push({
        name: "indetail",
        params: {
          id: val
        }
      });
    },
    handleCurrentChange(val) {
      this.fillDate(val);
    },
    loading() {
      let params = {
        filePath: this.dd
      };
      this.post(
        params,
        "services/app/guaranteeSlip/ImportGuaranteeFromExcel"
      ).then(rs => {
        console.log(rs);
        let id = rs.result.batchId;
        console.log(id);
        if (rs.success) {
          this.$router.push({ name: "lead", params: { id: id } });
        } else if (rs.result.sate == 1) {
          this.centerDialogVisible = true;
        }
      });
    },

    loadSuc(val) {
      console.log(val);
      if (val.state == 1) {
        this.open4();
      }
      this.dd = val.filePath;
    },
    open4() {
      this.$message.error("请重新上传");
    },
    error() {
      this.open4();
    },
    beforeAvatarUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isexcel = testmsg === "xls";
      const excel = testmsg === "xlsx";
      console.log(file);
      // const isexcel = file.type === 'excel/xlsx';
      //  const excel = file.type === 'excel/xls';
      if (!isexcel && !excel) {
        // this.excelFileName.push(file.name);
        this.$confirm("上传文件暂时只支持xlsx和xls格式", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          callback: action => {
            // this.$refs.form.resetFields();

            this.$emit("closeEditUpload");
          }
        });
      }
      return isexcel || excel;
    }
  }
};
</script>
<style lang="scss" scoped>
.unit-ment {
  background-color: #fff;

  .el-upload el-upload--text {
    line-height: 3;
  }
  .uti-table {
    margin-left: 20px;
    margin-right: 20px;
    color: #333;
    font-size: 13px;
  }
  .biaoge {
    width: 520px;
    margin-left: 52px;
    .file {
      float: left;
    }
    .daoru {
      font-size: 13px;
      margin-right: 20px;
      margin-left: 14px;
    }
  }

  .detail {
    color: #027dca;
  }
  .el-form-item {
    margin-bottom: 30px;
  }
  .circle1 {
    color: #cf1322;
    font-size: 14px;
  }
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #cf1322;
    margin-right: 10px;
  }
  .layout1 {
    margin-left: 49px;
    .form {
      float: left;
      width: 520px;
      .el-form-item__label {
        padding-right: 20px;
      }
      .el-input__inner {
        padding-left: 8px;
      }
      .el-textarea__inner {
        padding-left: 8px;
        width: 420px;
        height: 280px;
      }
      .inputbox {
        width: 420px;
        height: 28px;
      }
    }
    .notice {
      float: left;
      color: #555;
      margin-left: 100px;
      .notice1 {
        margin-top: 20px;
        font-size: 13px;
      }
    }
  }
  .btn2 {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 37px;
  }
  .layout {
    .biaoge {
      float: left;
    }
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    .notice2 {
      margin-left: 100px;
      float: left;
      color: #555;
      font-size: 13px;
      .notice3 {
        margin-top: 20px;
        a {
          color: #027dca;
        }
      }
    }
  }

  .block {
    width: 400px;
    display: block;
    margin: 25px 0;
  }
  .bottom {
    text-align: center;
    .btn1 {
      display: inline-block;
      margin-bottom: 37px;
    }
    .bdload {
      text-align: center;
    }
  }

  .unit-tabs {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #d7d7d7;
    padding: 0 0;
    margin-bottom: 30px;
    .tabs1 {
      line-height: 50px;
      width: 150px;
      display: inline-block;
      font-size: 16px;
      margin-top: 9px;
      text-align: center;
      margin-left: 20px;
      font-weight: 500;
      cursor: pointer;
    }
    .tabs2 {
      line-height: 50px;
      width: 150px;
      display: inline-block;
      font-size: 16px;
      text-align: center;
      margin-left: 20px;
      font-weight: 500;
      cursor: pointer;
    }

    .unit-tabs-act {
      color: #ff8819;
      border-bottom: 2px solid #ff8819;
    }
  }
  .paging {
    text-align: right;
    margin:50px 20px 30px 0;
  }
  .model {
    margin-left: 30px;
    float: left;
    clear: right;
    position: relative;
    line-height: 2;
    .el-upload-list__item-name {
      padding-left: 0;
    }
    .model1 {
      color: #027dca;
    }
    .model2 {
      position: absolute;
      top: 3px;
      right: -149px;
    }
  }
}
</style>